说说react中的 styled-components ​

import createStyledComponent from '../models/StyledComponent';
import { IStyledComponentFactory, WebTarget } from '../types';
import domElements from '../utils/domElements';
import constructWithOptions from './constructWithOptions';

const styled = <Props>(tag: WebTarget) =>
  constructWithOptions<IStyledComponentFactory, Props>(createStyledComponent, tag);

type BaseStyled = typeof styled;

const enhancedStyled = styled as BaseStyled &
  {
    [key in typeof domElements[number]]: ReturnType<BaseStyled>;
  };

// 针对所有有效的 HTML 元素，支持快捷访问
// 即在项目中我们经常使用的 styled.button  等价于  styled('button')
domElements.forEach(domElement => {
  enhancedStyled[domElement] = styled(domElement);
});

export default enhancedStyled;

import createStyledComponent from '../models/StyledComponent';
import { IStyledComponentFactory, WebTarget } from '../types';
import domElements from '../utils/domElements';
import constructWithOptions from './constructWithOptions';

const styled = <Props>(tag: WebTarget) =>
  constructWithOptions<IStyledComponentFactory, Props>(createStyledComponent, tag);

type BaseStyled = typeof styled;

const enhancedStyled = styled as BaseStyled &
  {
    [key in typeof domElements[number]]: ReturnType<BaseStyled>;
  };

// 针对所有有效的 HTML 元素，支持快捷访问
// 即在项目中我们经常使用的 styled.button  等价于  styled('button')
domElements.forEach(domElement => {
  enhancedStyled[domElement] = styled(domElement);
});

export default enhancedStyled;

export default function constructWithOptions<
  Constructor extends Function = IStyledComponentFactory,
  OuterProps = undefined // used for styled<{}>().attrs() so attrs() gets the generic prop context
>(componentConstructor: Constructor, tag: WebTarget, options: Options = EMPTY_OBJECT as Object) {
  // We trust that the tag is a valid component as long as it isn't falsish
  // Typically the tag here is a string or function (i.e. class or pure function component)
  // However a component may also be an object if it uses another utility, e.g. React.memo
  // React will output an appropriate warning however if the `tag` isn't valid
  if (!tag) {
    throw styledError(1, tag);
  }

  /* This is callable directly as a template function */
  const templateFunction = <Props = OuterProps>(
    initialStyles: TemplateStringsArray | StyledObject | StyleFunction<Props>,
    ...interpolations: Interpolation<Props>[]
  ) => componentConstructor(tag, options, css(initialStyles, ...interpolations));

  /* Modify/inject new props at runtime */
  templateFunction.attrs = <Props = OuterProps>(attrs: Attrs<Props>) =>
    constructWithOptions<Constructor, Props>(componentConstructor, tag, {
      ...options,
      attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),
    });

  /**
   * If config methods are called, wrap up a new template function and merge options */
  templateFunction.withConfig = (config: Options) =>
    constructWithOptions<Constructor, OuterProps>(componentConstructor, tag, {
      ...options,
      ...config,
    });

  return templateFunction;
}

export default function constructWithOptions<
  Constructor extends Function = IStyledComponentFactory,
  OuterProps = undefined // used for styled<{}>().attrs() so attrs() gets the generic prop context
>(componentConstructor: Constructor, tag: WebTarget, options: Options = EMPTY_OBJECT as Object) {
  // We trust that the tag is a valid component as long as it isn't falsish
  // Typically the tag here is a string or function (i.e. class or pure function component)
  // However a component may also be an object if it uses another utility, e.g. React.memo
  // React will output an appropriate warning however if the `tag` isn't valid
  if (!tag) {
    throw styledError(1, tag);
  }

  /* This is callable directly as a template function */
  const templateFunction = <Props = OuterProps>(
    initialStyles: TemplateStringsArray | StyledObject | StyleFunction<Props>,
    ...interpolations: Interpolation<Props>[]
  ) => componentConstructor(tag, options, css(initialStyles, ...interpolations));

  /* Modify/inject new props at runtime */
  templateFunction.attrs = <Props = OuterProps>(attrs: Attrs<Props>) =>
    constructWithOptions<Constructor, Props>(componentConstructor, tag, {
      ...options,
      attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),
    });

  /**
   * If config methods are called, wrap up a new template function and merge options */
  templateFunction.withConfig = (config: Options) =>
    constructWithOptions<Constructor, OuterProps>(componentConstructor, tag, {
      ...options,
      ...config,
    });

  return templateFunction;
}

// 利用 forwardRef 创建一个新的临时组件，而不是拓展父级组件
let WrappedStyledComponent: IStyledComponent;

function forwardRef(props: ExtensibleObject, ref: Ref<Element>) {
// eslint-disable-next-line
return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);
}

forwardRef.displayName = displayName;

WrappedStyledComponent = React.forwardRef(forwardRef) as unknown as IStyledComponent;
WrappedStyledComponent.attrs = finalAttrs;
WrappedStyledComponent.componentStyle = componentStyle;
WrappedStyledComponent.displayName = displayName;
WrappedStyledComponent.shouldForwardProp = shouldForwardProp;

// this static is used to preserve the cascade of static classes for component selector
// purposes; this is especially important with usage of the css prop
WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
: (EMPTY_ARRAY as string[]);

WrappedStyledComponent.styledComponentId = styledComponentId;

// fold the underlying StyledComponent target up since we folded the styles
WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;

// 生成样式类名
const generatedClassName = useInjectedStyle(
    componentStyle,
    isStatic,
    context,
    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined
);

// 生成结点
propsForElement[
    // handle custom elements which React doesn't properly alias
    isTargetTag &&
    domElements.indexOf(elementToBeCreated as unknown as Extract<typeof domElements, string>) === -1
      ? 'class'
      : 'className'
  ] = (foldedComponentIds as string[])
    .concat(
      styledComponentId,
      (generatedClassName !== styledComponentId ? generatedClassName : null) as string,
      props.className,
      attrs.className
    )
    .filter(Boolean)
    .join(' ');

  propsForElement.ref = refToForward;

  return createElement(elementToBeCreated, propsForElement);

// 利用 forwardRef 创建一个新的临时组件，而不是拓展父级组件
let WrappedStyledComponent: IStyledComponent;

function forwardRef(props: ExtensibleObject, ref: Ref<Element>) {
// eslint-disable-next-line
return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);
}

forwardRef.displayName = displayName;

WrappedStyledComponent = React.forwardRef(forwardRef) as unknown as IStyledComponent;
WrappedStyledComponent.attrs = finalAttrs;
WrappedStyledComponent.componentStyle = componentStyle;
WrappedStyledComponent.displayName = displayName;
WrappedStyledComponent.shouldForwardProp = shouldForwardProp;

// this static is used to preserve the cascade of static classes for component selector
// purposes; this is especially important with usage of the css prop
WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)
: (EMPTY_ARRAY as string[]);

WrappedStyledComponent.styledComponentId = styledComponentId;

// fold the underlying StyledComponent target up since we folded the styles
WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;

// 生成样式类名
const generatedClassName = useInjectedStyle(
    componentStyle,
    isStatic,
    context,
    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined
);

// 生成结点
propsForElement[
    // handle custom elements which React doesn't properly alias
    isTargetTag &&
    domElements.indexOf(elementToBeCreated as unknown as Extract<typeof domElements, string>) === -1
      ? 'class'
      : 'className'
  ] = (foldedComponentIds as string[])
    .concat(
      styledComponentId,
      (generatedClassName !== styledComponentId ? generatedClassName : null) as string,
      props.className,
      attrs.className
    )
    .filter(Boolean)
    .join(' ');

  propsForElement.ref = refToForward;

  return createElement(elementToBeCreated, propsForElement);